<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>

  Картинка размером в <code>30px</code>, значения <code>vertical-align</code>:

  <pre>
baseline(по умолчанию) <img src="https://js.cx/clipart/30.png">
middle(по середине) <img src="https://js.cx/clipart/30.png" style="vertical-align: middle">
sub<sub>вровень с &lt;sub&gt;</sub> <img src="https://js.cx/clipart/30.png" style="vertical-align: sub">
super<sup>вровень с &lt;sup&gt;</sup> <img src="https://js.cx/clipart/30.png" style="vertical-align: super">
text-top(верхняя граница вровень с текстом) <img src="https://js.cx/clipart/30.png" style="vertical-align: text-top">
text-bottom(нижняя граница вровень с текстом) <img src="https://js.cx/clipart/30.png" style="vertical-align: text-bottom">
</pre>

</body>

</html>